<template>
<el-drawer :title="formDrawer.title" :visible.sync="formDrawer.visible" direction="rtl" custom-class="drawer-right-side" :before-close="closeDrawer" :append-to-body="true" size="40%">
    <el-form class="ruleForm" ref="ruleForm" :model="ruleForm" :rules="rules" label-position="left" label-width="100px">
        <el-form-item label="收款编号" prop="receipt_no" required>
            <el-input v-model="ruleForm.receipt_no" placeholder="请填写姓名"></el-input>
        </el-form-item>

        <el-form-item label="收款方式" prop="income_way_id" required>
            <picker-view type="paidWay" v-model="ruleForm.income_way_id" placeholder="请选择收款方式"></picker-view>
        </el-form-item>

        <el-form-item label="收款性质" prop="income_type_id" required>
            <picker-view type="paidType" v-model="ruleForm.income_type_id" placeholder="请选择收款性质"></picker-view>
        </el-form-item>

        <el-form-item label="收款日期" prop="income_date" required>
            <el-date-picker v-model="ruleForm.income_date" type="date" value-format="yyyy-MM-dd" placeholder="请填写预产期"></el-date-picker>
        </el-form-item>

        <el-form-item label="收款金额" prop="total" required>
            <el-input type="number" v-model="ruleForm.total" placeholder="请录入收款金额"></el-input>
        </el-form-item>

        <el-form-item label="备注" prop="remark">
            <el-input v-model="ruleForm.remark" placeholder="请输入备注"></el-input>
        </el-form-item>

        <el-form-item label="凭证" prop="receipt" required>
            <upload-files ref="receiptRef" v-model="ruleForm.receipt"></upload-files>
        </el-form-item>

        <el-form-item label="上传收据" prop="note" required>
            <upload-files ref="noteRef" v-model="ruleForm.note"></upload-files>
        </el-form-item>

        <div class="fixed-bottom" style="width:40vw;">
            <el-button type="primary" size="small" @click="submit">提交并保存</el-button>
        </div>
    </el-form>
</el-drawer>
</template>

<script>
import pickerView from "@/components/picker/select.vue";
import {
    incomeForm
} from '@/views/order/components/config/orderForm.js';
import uploadFiles from '@/components/upload/files.vue';

import {
    doAppendApi
} from '@/api/order/income.js'

export default {
    components: {
        pickerView,
        uploadFiles
    },
    data() {
        return {
            formDrawer: {
                title: "收款",
                visible: false,
            },
            ruleForm: Object.assign({}, incomeForm),
            rules: {
                receipt_no: [{
                    required: true,
                    message: "请录入收款编号",
                }],
                income_way_id: [{
                    required: true,
                    message: "请选择收款方式",
                }],
                income_type_id: [{
                    required: true,
                    message: "请选择收款性质",
                }],
                income_date: [{
                    required: true,
                    message: "请选择收款日期",
                }],
                total: [{
                    required: true,
                    message: "请录入收款金额",
                }],
                receipt: [{
                    required: true,
                    message: "上传收款凭证",
                }],
                note: [{
                    required: true,
                    message: "请上传收据",
                }],
            },
        }
    },
    methods: {
        showDrawer(order_id) {
            this.formDrawer.visible = true;
            this.ruleForm = Object.assign({}, incomeForm);
            this.ruleForm.order_id = order_id;
            this.$nextTick(() => {
                this.$refs.receiptRef.clearFiles();
                this.$refs.noteRef.clearFiles();
            })
        },
        closeDrawer() {
            this.formDrawer.visible = false;
        },
        submit() {
            this.$refs['ruleForm']
                .validate(valid => {
                    if (valid) {
                        let params = {};
                        params['income'] = this.ruleForm;
                        doAppendApi(params).then((res) => {
                            if (res.code == 200) {
                                this.$message.success(res.msg);
                                this.$emit("doRefresh", this.ruleForm.order_id)
                                this.closeDrawer();
                            } else {
                                this.$message.error(res.msg);
                            }
                        }).catch((err) => {

                        });
                    }
                })
        }
    }
}
</script>

<style>

    </style>
